import React, { useRef, useLayoutEffect } from "react";
import ReactDOM from "react-dom";
function AnimationEffect() {
  const ref = useRef();
  useLayoutEffect(() => {
    console.log("useEffec");
    ref.current.style.transform = "translateX(500px)";
    ref.current.style.transition = "all 0.8s";
  });
  let style = {
    width: "100px",
    height: "100px",
    backgroundColor: "red",
  };
  console.log('render');
  return <div style={style} ref={ref}></div>;
}
function render() {
  ReactDOM.render(<AnimationEffect />, document.getElementById("root"));
}
render();